<template>
  <div class="app-menu">
    <el-row>
      <el-col :span="24">
        <dynForm :info-form="infoForm" :search-tags="searchTags">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch"
          >
            {{ $t("search") }}</el-button
            >
        </dynForm>
      </el-col>
    </el-row>
    <!--工具栏-->
    <div class="table-buttons">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="switchHandle('add')"
      >{{ $t("add") }}</el-button
      >
    </div>
    <!-- 主体部分 -->
    <el-card class="box-card" shadow="never">
      <!-- 表单部分 -->
      <el-row>
        <el-table
          v-loading="loading"
          ref="table"
          :header-cell-style="{ background: '#F5F7FA' }"
          :data="menus"
          :tree-props="{children: 'children', hasChildren: ''}"
          border
          row-key="id"
        >
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column :show-overflow-tooltip="true" :label="$t(&quot;menuDescription&quot;)" width="185px" prop="label" />
          <el-table-column :show-overflow-tooltip="true" :label="$t(&quot;menuName&quot;)" width="185px" prop="name" />
          <el-table-column :label="$t(&quot;icon&quot;)" prop="icon" align="center" width="60px">
            <template slot-scope="scope">
              <svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
            </template>
          </el-table-column>
          <el-table-column :label="$t(&quot;order&quot;)" prop="order" align="center" width="80">
            <template slot-scope="scope">
              {{ scope.row.order }}
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" :label="$t(&quot;resourceName&quot;)" prop="resourceName" width="180" />
          <el-table-column :show-overflow-tooltip="true" :label="$t(&quot;routeUrl&quot;)" prop="formName" width="240" />
          <el-table-column :label="$t(&quot;menuType&quot;)" prop="type">
            <template slot-scope="scope">
              <span v-if="scope.row.type === 0">{{ $t("system") }}</span>
              <span v-if="scope.row.type === 1">{{ $t("catalog") }}</span>
              <span v-if="scope.row.type === 2">{{ $t("menu") }}</span>
              <span v-if="scope.row.type === 3">{{ $t("button") }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t(&quot;menuCategory&quot;)" prop="category">
            <template slot-scope="scope">
              <span v-if="scope.row.category === 1">{{ $t("webpage") }}</span>
              <span v-else>{{ $t("apppage") }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t(&quot;visible&quot;)" prop="visible" width="95px">
            <template slot-scope="scope">
              <span v-if="scope.row.visible === 1">{{ $t("visibled") }}</span>
              <span v-else>{{ $t("disvisible") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="130" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row.id)"/>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDel(scope.row.id)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
    <!-- 弹窗组件 -->
    <myDialog
      ref="myDialog"
      :form="form"
      :title="title"
      :is-disabled="isDisabled"
      @doSave="doSave"
      @closeDialog="closeDialog"
    />
  </div>
</template>

<script>
import crudMenu from '@/api/system/menu'
import mySetting from '@/mixins/mySetting'
export default {
  name: 'MenuPage',
  components: { myDialog: () => import('./module/form') },
  mixins: [mySetting],
  data() {
    return {
      menus: [],
      loading: true,
      multipleSelection: [],
      UpdateDisabled: true,
      DeleteDisabled: true,
      title: '', // 弹窗标题
      form: {},
      infoForm: {},
      searchTags: [
        { label: '关键字', prop: 'name', tag: 'DynInput' }
      ],
      isDisabled: false // 是否禁用表单内容
    }
  },
  created() {
    this.initList()
  },
  methods: {
    switchHandle(val) {
      switch (val) {
        case 'add':
          this.handleClickAdd()
          break
        default:
          break
      }
    },
    // 新增数据
    handleClickAdd() {
      this.title = this.$t('addMenu')
      this.$refs.myDialog.openDialog(1)
    },
    // 删除数据
    handleDel(id) {
      this.$confirm(
        this.$t('confirmDelete') +
          '1' +
          this.$t('recordCount'),
        this.$t('tip'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        const ids = []
        ids.push(id)
        crudMenu.del({ ids: ids }).then((res) => {
          this.doMerge(res)
          this.setOnePage()
          this.initList()
        })
      })
    },
    // 修改数据
    handleEdit(id) {
      this.title = this.$t('modifyMenu')
      this.isDisabled = false
      crudMenu.get({ id: id }).then((res) => {
        this.form = res.data
      })
      this.$refs.myDialog.openDialog(2, id)
    },
    // 初始化列表
    initList() {
      crudMenu.getMenusTree({ name: this.infoForm.name, pid: 0 }).then(res => {
        this.menus = res.data
        this.loading = false
      })
    },
    // 点击查询
    doSearch() {
      this.initList()
    },
    // 确认新增
    doSave() {
      this.initList()
    },
    // 关闭弹窗清空数据
    closeDialog() {
      this.isDisabled = false
      this.form = {}
    },
    getMenus(tree, treeNode, resolve) {
      crudMenu.getMenus({ pid: tree.id }).then(res => {
        resolve(res.data)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
.app-menu{
  padding-bottom: 33px;
}
.app-menu .el-row:nth-child(1) {
  padding-bottom: 0;
}
::v-deep .el-table td {
  padding: 4px 0;
}
::v-deep .el-table th, .el-table td {
  padding: 6px 0;
}

</style>
